.app-mob-color-picker-wrapper{
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) ;
    width: 100vw;
    z-index: 999;

    .color-pick-wrapper{
        background: #fff;
        position: relative;	
        width: calc(100% + 2px);
        height: 100%;
        z-index: 999;
        transform: translate(-1px,0);
        overflow: hidden;
        padding: 16px 16px;

        .color-pick-wrapper__content{
            width: 100%;
            height: 100%;

            .color-board{
                position: relative;
                width: 100%;
                border: none;
                background: rgb(255, 0, 0);

                .color-point{
                    position: absolute;
                    left: 0;
                    top: 0;
                    margin-top: -7px;
                    margin-left: -7px;
                    width: 12px;
                    height: 12px;
                    z-index: 1002;
                    border: 2px solid #464646;
                    border-radius: 50%;

                    .shape{
                        width: 8px;
                        height: 8px;
                        border: 2px solid #fff;
                        border-radius: 50%;
                    }
                }

                .bg{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                }

                .bg1{
                    z-index: 1000;
                    background: -webkit-linear-gradient(left, #fff 0%, rgba(255,255,255,0) 100%);
                    background: -o-linear-gradient(left, #fff 0%, rgba(255,255,255,0) 100%);
                    background: -moz-linear-gradient(left, #fff 0%, rgba(255,255,255,0) 100%);
                    background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0) 100%);
                }

                .bg2{
                    z-index: 1001;
                    background: -webkit-linear-gradient(top, transparent 0%, #000 100%);
                    background: -o-linear-gradient(top, transparent 0%, #000 100%);
                    background: -moz-linear-gradient(top, transparent 0%, #000 100%);
                    background: linear-gradient(to bottom, transparent 0%, #000 100%);
                }
            }

            .color-bar{
                position: relative;
                width: 100%;
                height: 30px;
                margin-top: 10px;

                .color-rect{
                    position: absolute;
                    left: 0;
                    width: 8px;
                    z-index: 1000;

                    .shape{
                        margin-left: -4px;
                        // margin-top: -3px;
                        width: 3px;
                        height: 30px;
                        border: 3px solid #464646;
                        border-radius: 3px;
                    }
                }

                .bg{
                    width: 100%;
                    height: 100%;
                    border-radius: 3px;
                    background: -webkit-linear-gradient(left, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%);
                    background: -o-linear-gradient(left, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%);
                    background: -moz-linear-gradient(left, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%);
                    background: linear-gradient(to right, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%);
                }
            }

            .color-transparency{
                position: relative;
                width: 100%;
                height: 30px;
                margin-top: 10px;
                background-image:
                    linear-gradient(45deg, #CCCCCC 25%, transparent 0, transparent 75%, #CCCCCC 0),
                    linear-gradient(45deg, #CCCCCC 25%, transparent 0, transparent 75%, #CCCCCC 0);
                background-position: 0 0, 8px 8px;
                background-size: 16px 16px;

                .color-transparency-backgre{
                    position: relative;
                    width: 100%;
                    height: 100%;
                    margin-top: 10px;

                    .color-rect{
                        position: absolute;
                        left: 0;
                        width: 8px;
                        z-index: 1000;

                        .shape{
                            margin-left: -4px;
                            width: 3px;
                            height: 30px;
                            border: 3px solid #464646;
                            border-radius: 3px;
                        }
                    }

                    .bg{
                        width: 100%;
                        height: 100%;
                        border-radius: 3px;
                        background: linear-gradient(
                                to bottom,
                                rgba(255, 255, 255, 0) 0%,
                                rgba(255, 255, 255, 1) 100%
                            );
                    }
                }                
            }

            .color-display{
                width: 100%;
                height: 40px;
                margin-top: 10px;
                display: flex;

                input{
                    flex: 1;
                    border: 1px solid #e4e4e4;
                    padding-left: 10px;
                }

                div{
                    height: 100%;
                    width: 40px;
                    margin-left: 10px;
                    border: 1px solid #e4e4e4;
                }
            }
            
            .color-pick__switch{
                position: absolute;
                bottom: 0px;
                left: 0;
            }
        }
    }
}
